<template>
	<div>
		<van-row>
		  <van-col span="2"></van-col>
		  <van-col span="20">
			  <div>
				  <van-image
				    round
				    width="10rem"
				    height="10rem"
				    src="https://img.yzcdn.cn/vant/cat.jpeg"
				  />
			  </div>
			  <div>
				  <van-form>
				    <van-cell-group inset>
				      <van-field
						clearable
				        v-model="user.phone"
				        label="手机号"
				        placeholder="请输入手机号"
				        :rules="[{ required: true, message: '请输入手机号' }]"
						@change="ckPhone()"
				      />
					  <van-field
					      v-model="code"
					      center
					      clearable
					      label="短信验证码"
					      placeholder="请输入短信验证码"
						  @change="ckCode()"
					    >
					      <template #button>
					        <van-button size="small" type="primary" @click="sendCode()" :disabled="isbtncode">发送验证码</van-button>
					      </template>
					    </van-field>
				      <van-field
				        v-model="user.password"
				        type="password"
				        label="密码"
				        placeholder="请输入密码"
				        :rules="[{ required: true, message: '请输入密码' }]"
				      />
					  <van-field
					    v-model="password2"
					    type="password"
					    label="确认密码"
					    placeholder="请再次输入密码"
					    :rules="[{ required: true, message: '请输入确认密码' }]"
					  />
				    </van-cell-group>
					<van-field name="radio">
					  <template #input>
					    <van-radio-group v-model="checked" direction="horizontal">
					      <van-radio name="1">请阅读并勾选 用户需知》和免责声明》</van-radio>
					    
					    </van-radio-group>
					  </template>
					</van-field>
					
				    <div style="margin: 16px;">
				      <van-button round block type="primary" :disabled="isbtnlogin" @click="register()">
				        注册
				      </van-button>
				    </div>
					<div style="margin-top: 16px;">
						<van-row>
						  <van-col span="8"><router-link to="/register">登录账号</router-link></van-col>
						  <van-col span="8"></van-col>
						  <van-col span="8"><router-link to="/findpass">忘记密码?</router-link></van-col>
						</van-row>
					</div>
				  </van-form>
			  </div>
		  </van-col>
		  <van-col span="2"></van-col>
		</van-row>
	</div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
  },
  data(){
	  return{
		 user:{
		 	phone: "",
		 	password: "",
		 },
		isbtncode:true,
		isbtnlogin:true,
		code:"",
		password2:"",
		checked:false
	  }
  },methods:{
	  //校验手机号是否可用
	  ckPhone(){
		  this.axios.get("auth/checkphone?phone="+this.user.phone).then((res) => {
			 if(res.data.code==200){
				 //可用
				this.$toast.success('恭喜你，手机号可用');
				this.isbtncode=false;
			 }else{
				 //存在，不可用
				 this.$toast.fail('手机号已在，可登录');
			 }
		  });
	  },
	  //发送手机验证码
	  sendCode(){
	  		  this.axios.get("sms/sendrcode?phone="+this.user.phone).then((res) => {
	  			 if(res.data.code==200){
	  				 //可用
	  				this.$toast.success('验证码已发送，请注意查收');
	  				
	  			 }else{
	  				 //存在，不可用
	  				 this.$toast.fail('网络异常');
	  			 }
	  		  });
	  },
	  //校验手机号的验证码是否正确
	  ckCode(){
			  var uc={
				  phone:this.user.phone,
				  code:this.code
			  }
	  		  this.axios.post("sms/checkrcode",uc).then((res) => {
	  			 if(res.data.code==200){
	  				 //可用
	  				this.$toast.success('验证码校验成功');
	  				this.isbtnlogin=false;
	  			 }else{
	  				 //存在，不可用
	  				 this.$toast.fail('验证码错误，请检查');
	  			 }
	  		  });
	  },
	  //实现账号的注册
	  register(){
		  var that=this;
		  this.axios.post("auth/register",this.user).then((res) => {
		    console.log(res.data)
			if(res.data.code==200){
				//更新令牌
				this.$store.commit("setToken",res.data.data);
				//吐司，短暂的弹出窗，默认3秒自动消失
				this.$toast.success('注册成功，跳转到登录');
				//成功-跳转到主页
				this.$router.push("/login");
			}else{
				this.$toast({
				  message: "亲，网络异常",
				  icon: 'close'
				});
			}
		  })
	  }
  }
}
</script>

<style>


</style>
